<template>
    <div class="user-container">
        <div class="delivery-records">
            <el-card>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="我的订单" name="first">
                        <Order></Order>
                    </el-tab-pane>
                    <el-tab-pane label="我的收藏" name="second">
                        <Collect></Collect>
                    </el-tab-pane>
                </el-tabs>

            </el-card>
        </div>
        <div class="user-info">
            <el-card class="user-card" v-loading="userLoading">
                <div class="user-header">
                    <el-avatar :size="100" :src="userInfo?.avatar || defaultAvatar"></el-avatar>
                    <h2>{{ userInfo?.nickName || '未设置昵称' }}</h2>
                </div>
                <el-divider></el-divider>
                <div class="user-details">
                    <div class="detail-item">
                        <span class="label">用户名：</span>
                        <span class="value">{{ userInfo?.userName }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">性别：</span>
                        <span class="value">{{ userInfo?.sex == 0 ? '男' : '女' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">手机号：</span>
                        <span class="value">{{ userInfo?.phonenumber }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="label">邮箱：</span>
                        <span class="value">{{ userInfo?.email }}</span>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="showEditDialog" class="edit-btn">编辑资料</el-button>
                </div>
            </el-card>
        </div>

        <!-- 编辑资料弹窗 -->
        <el-dialog title="编辑个人资料" :visible.sync="editDialogVisible" width="500px">
            <el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="editForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="editForm.sex" placeholder="选择性别" clearable>
                        <el-option label="男" value="0">
                        </el-option>
                        <el-option label="女" value="1">
                        </el-option>
                        <el-option label="未知" value="2">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码" prop="phonenumber">
                    <el-input v-model="editForm.phonenumber"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <MyUpload ref="childUpload" @callParent="transDownloadUrl"></MyUpload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit" :loading=loading>确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getDeliverList, getUserInfo, getUserSubmit } from '@/api';
import MyUpload from '@/components/upload';
import Order from './order/index.vue';
import Collect from './collect/index.vue';

export default {
    components: {
        MyUpload,
        Order,
        Collect
    },
    name: 'User',
    data() {
        return {
            userInfo: {},
            defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            editDialogVisible: false,
            loading: false,
            deliverLoading: false,
            userLoading: false,
            editForm: {
                nickname: '',
                avatar: '',
                sex: '',
                phonenumber: '',
                email: '',
            },
            editRules: {
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                introduce: [
                    { required: true, message: '请输入个人简介', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                phonenumber: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
            },
            jobDetailVisible: false,
            jobDetailLoading: false,
            detailDialogVisible: false,
            resumeRules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                school: [
                    { required: true, message: '请输入学校', trigger: 'blur' }
                ],
                education: [
                    { required: true, message: '请选择学历', trigger: 'change' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                major: [
                    { required: true, message: '请输入专业', trigger: 'blur' }
                ]
            },
            activeName: 'first'
        }
    },
    mounted() {
        this.getUser();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        transDownloadUrl(url) {
            this.editForm.avatar = url;
        },
        getUser() {
            this.userLoading = true;
            getUserInfo().then(res => {
                this.userInfo = res.user;
                this.userLoading = false;
            }).catch(err => {
                this.userLoading = false;
                this.$message.error(err.msg);
            })
        },
        handleEdit() {
            this.editDialogVisible = true;
            this.editForm = Object.assign({}, this.userInfo);
        },
        handleEditClose() {
            this.editDialogVisible = false;
            this.$refs.editForm.resetFields();
        },
        handleEditSubmit() {
            this.$refs.editForm.validate(valid => {
            })
        },
        formatDate(date) {
            if (!date) return '暂无';
            return new Date(date).toLocaleString();
        },
        showEditDialog() {
            this.editForm = {
                userName: this.userInfo.userName,
                nickName: this.userInfo.nickName,
                sex: this.userInfo.sex,
                phonenumber: this.userInfo.phonenumber,
                email: this.userInfo.email,
                avatar: this.userInfo.avatar,
            }
            this.$nextTick(() => {
                this.$refs.childUpload.setImgUrl(this.userInfo.avatar);
            })
            this.editDialogVisible = true;
        },
        submitEdit() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    getUserSubmit(this.editForm).then(res => {
                        localStorage.setItem('userInfo', JSON.stringify(res.data));
                        this.$message.success('更新成功');
                        this.loading = false;
                        this.editDialogVisible = false;
                    }).catch(err => {
                        this.$message.error(err.msg);
                        this.loading = false;
                    })

                }
            });
        },
        handleAvatarSuccess(res) {
            this.editForm.avatar = res.url;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleSizeChange(val) {
            this.filterForm.pageSize = val;
            this.getDeliveryRecords();
        },
    }
}
</script>

<style scoped>
.user-container {
    padding: 20px;
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.user-info {
    width: 300px;
    flex-shrink: 0;
}

.delivery-records {
    flex-grow: 1;
}

.user-card {
    text-align: center;
}

.user-header {
    padding: 20px 0;
}

.user-header h2 {
    margin: 10px 0;
    font-size: 20px;
}

.user-email {
    color: #666;
    font-size: 14px;
}

.user-details {
    text-align: left;
    padding: 0 20px;
}

.detail-item {
    margin: 10px 0;
    font-size: 14px;
}

.detail-item .label {
    color: #666;
    margin-right: 10px;
}

.edit-btn {
    margin-top: 20px;
    width: 100%;
}

.avatar-uploader {
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.job-detail-header {
    text-align: center;
    margin-bottom: 20px;
}

.job-detail-header h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #303133;
}

.job-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.job-meta .company {
    font-size: 16px;
    color: #606266;
}

.job-detail-content {
    padding: 0 20px;
}

.detail-header {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.detail-title {
    margin-bottom: 20px;
}

.detail-title h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
}

.detail-company {
    display: flex;
    align-items: center;
    gap: 15px;
}

.company-logo {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

.company-info {
    flex: 1;
}

.company-name {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 5px;
}

.company-desc {
    font-size: 14px;
    color: #606266;
}

.detail-content {
    padding: 20px;
}

.detail-section {
    margin-bottom: 20px;
}

.detail-section h3 {
    font-size: 16px;
    color: #303133;
    margin-bottom: 10px;
}

.requirement-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.requirement-item {
    display: flex;
    align-items: center;
}

.requirement-item .label {
    color: #606266;
    margin-right: 10px;
    min-width: 80px;
}

.requirement-item .value {
    color: #303133;
}

.job-description {
    margin-top: 10px;
    line-height: 1.6;
    color: #606266;
}
</style>